<template>
  <div class="comment-list" :class="{ 'theme-dark': theme === 'dark' }">
    <!-- 调试信息 -->
    <!-- <div style="padding: 10px; background: yellow; color: black;">
      items数量: {{ items?.length }}, hasComments: {{ hasComments }}
    </div> -->
    <div class="comments">
      <div v-for="item in items" :key="getItemId(item)" class="comment-item">
        <div v-if="item.data?.user" class="comment-header">
          <img :src="getUserAvatar(item)" :alt="getUserName(item)" class="comment-avatar" />
          <div class="comment-user">
            <span class="nickname">{{ getUserName(item) }}</span>
          </div>
          <div class="like-wrapper">
            <span v-if="item.data?.likeCount !== undefined && item.data?.likeCount !== null" class="like-count">
              {{ item.data.likeCount }}
            </span>
            <van-icon name="good-job-o" size="18" class="like-icon" @click="handleLike(item)" />
          </div>
        </div>

        <div v-if="item.data?.message" class="comment-content">
          <p class="message">{{ item.data.message }}</p>
          <div v-if="item.data.parentReply" class="reply-content">
            <div class="reply-header">
              <span class="reply-target">回复 {{ item.data.parentReply.user?.nickname }}</span>
            </div>
            <div class="reply-body">
              <img :src="item.data.parentReply.user?.avatar || ''" alt="" class="reply-avatar" />
              <div class="reply-info">
                <span class="reply-nickname">{{ item.data.parentReply.user?.nickname }}</span>
                <p class="reply-message">{{ item.data.parentReply.message }}</p>
              </div>
            </div>
          </div>

          <div class="comment-actions">
            <span class="reply-btn" @click="handleReply(item)">回复</span>
            <span v-if="item.data?.showConversationButton" class="show-conversation">
              查看对话
            </span>
            <span class="time">{{ formatTime(item.data?.createTime) }}</span>
          </div>
        </div>

        <div v-if="item.data?.user" class="comment-divider"></div>
      </div>
    </div>

    <div v-if="hasMore" class="load-more" @click="handleLoadMore">
      <van-loading v-if="loading" size="16">加载中...</van-loading>
      <span v-else>加载更多</span>
    </div>

    <div v-if="!hasMore && hasComments" class="no-more">
      没有更多评论了
    </div>

    <!-- 空状态提示 -->
    <div v-if="!hasComments && !loading" class="empty-comments">
      <p>暂无评论</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Icon as VanIcon, Loading as VanLoading, showToast } from 'vant'

interface User {
  nickname?: string
  avatar?: string
}

interface ParentReply {
  message?: string
  user?: User
}

interface CommentItemData {
  id?: number
  message?: string
  likeCount?: number
  createTime?: number
  user?: User
  parentReply?: ParentReply
  showConversationButton?: boolean
}

interface CommentItem {
  id?: number
  type?: string
  data?: CommentItemData
}

const props = withDefaults(defineProps<{
  items?: CommentItem[]
  title?: string
  showArrow?: boolean
  hasMore?: boolean
  loading?: boolean
  theme?: 'light' | 'dark'
}>(), {
  items: () => [],
  hasMore: false,
  loading: false,
  theme: 'light'
})

const emit = defineEmits<{
  'load-more': []
  'reply': [item: CommentItem]
  'like': [item: CommentItem]
}>()

// 计算属性
const hasComments = computed(() => {
  const result = props.items && props.items.length > 0
  // console.log('CommentList hasComments:', result, 'items:', props.items, 'items.length:', props.items?.length)
  return result
})

// 获取评论项ID
const getItemId = (item: CommentItem) => item.id || item.data?.id || ''

// 获取用户头像
const getUserAvatar = (item: CommentItem) => item.data?.user?.avatar || ''

// 获取用户名
const getUserName = (item: CommentItem) => item.data?.user?.nickname || '匿名用户'

// 格式化时间
const formatTime = (timestamp?: number) => {
  if (!timestamp) return ''

  const now = Date.now()
  const diff = now - timestamp
  const date = new Date(timestamp)

  // 小于一天，显示 HH:mm
  if (diff < 24 * 60 * 60 * 1000) {
    const hours = String(date.getHours()).padStart(2, '0')
    const minutes = String(date.getMinutes()).padStart(2, '0')
    return `${hours}:${minutes}`
  }

  // 大于一天，显示 yyyy/MM/dd
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}/${month}/${day}`
}

// 处理加载更多
const handleLoadMore = () => {
  if (!props.loading) {
    emit('load-more')
  }
}

// 处理回复
const handleReply = (item: CommentItem) => {
  showToast('回复功能需要登录')
  emit('reply', item)
}

// 处理点赞
const handleLike = (item: CommentItem) => {
  showToast('点赞功能需要登录')
  emit('like', item)
}
</script>

<style scoped lang="less">
.comment-list {
  padding: 0 3vw 6px;
  background: #fff;

  &.theme-dark {
    background: #000;
  }
}

.comments {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.comment-item {
  &:last-child {
    padding-bottom: 0;
  }
}

.comment-header {
  display: flex;
  align-items: center;
  gap: 12px;

  .comment-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(0, 0, 0, 0.1);
  }

  .comment-user {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;

    .nickname {
      font-size: 13px;
      font-weight: bold;
      color: #000;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .like-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;

    .like-count {
      font-size: 12px;
      color: #000;
    }

    .like-icon {
      color: rgba(0, 0, 0, 0.6);
      cursor: pointer;

      &:hover {
        color: #000;
      }
    }
  }
}

.comment-list.theme-dark {
  .comment-header {
    .comment-avatar {
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .comment-user {
      .nickname {
        color: #fff;
      }
    }

    .like-wrapper {
      .like-count {
        color: #fff;
      }

      .like-icon {
        color: rgba(255, 255, 255, 0.6);

        &:hover {
          color: #fff;
        }
      }
    }
  }
}

.comment-content {
  margin-left: 52px;

  .message {
    font-size: 13px;
    color: #000;
    line-height: 1.5;
    word-break: break-word;
  }
}

.comment-list.theme-dark {
  .comment-content {
    .message {
      color: #fff;
    }
  }
}

.reply-content {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 12px;

  .reply-header {
    margin-bottom: 11px;

    .reply-target {
      font-size: 12px;
      color: rgba(0, 0, 0, 0.5);
    }
  }

  .reply-body {
    display: flex;
    gap: 12px;

    .reply-avatar {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
    }

    .reply-info {
      flex: 1;
      min-width: 0;

      .reply-nickname {
        font-size: 13px;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.6);
        display: block;
        margin-bottom: 5px;
      }

      .reply-message {
        font-size: 12px;
        color: rgba(0, 0, 0, 0.7);
        line-height: 1.4;
        margin: 0;
        word-break: break-word;
      }
    }
  }
}

.comment-list.theme-dark {
  .reply-content {
    background: rgba(255, 255, 255, 0.1);

    .reply-header {
      .reply-target {
        color: rgba(255, 255, 255, 0.5);
      }
    }

    .reply-body {
      .reply-info {
        .reply-nickname {
          color: rgba(255, 255, 255, 0.6);
        }

        .reply-message {
          color: rgba(255, 255, 255, 0.7);
        }
      }
    }
  }
}

.comment-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 12px;

  .reply-btn,
  .show-conversation {
    color: rgba(0, 0, 0, 0.5);
    cursor: pointer;

    &:hover {
      color: rgba(0, 0, 0, 0.7);
    }
  }

  .time {
    color: rgba(0, 0, 0, 0.4);
    margin-left: auto;
  }
}

.comment-list.theme-dark {
  .comment-actions {

    .reply-btn,
    .show-conversation {
      color: rgba(255, 255, 255, 0.5);

      &:hover {
        color: rgba(255, 255, 255, 0.7);
      }
    }

    .time {
      color: rgba(255, 255, 255, 0.4);
    }
  }
}

.comment-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
  margin-top: 14px;
}

.comment-list.theme-dark {
  .comment-divider {
    background: rgba(255, 255, 255, 0.1);
  }
}

.load-more,
.no-more {
  text-align: center;
  padding: 20px;
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  cursor: pointer;
}

.no-more {
  cursor: default;
  color: rgba(0, 0, 0, 0.4);
}

.comment-list.theme-dark {

  .load-more,
  .no-more {
    color: rgba(255, 255, 255, 0.6);
  }

  .no-more {
    color: rgba(255, 255, 255, 0.4);
  }

  .empty-comments {
    color: rgba(255, 255, 255, 0.6);
  }
}

.empty-comments {
  text-align: center;
  padding: 40px 20px;
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;

  p {
    margin: 0;
  }
}
</style>
